<template>
  <a-modal
    :title="title"
    width="900px"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    cancelText="关闭">
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button @click="handleOk"  type="primary">确认</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :span="24">
            <div style='padding: 8px 24px;margin-bottom:12px;font-size: 16px;font-weight: 500;border-bottom: 1px solid #e8e8e8' >基础信息</div>
          </a-col>
          <a-col :span="24">
            <div class='flex wrap' style='padding: 0 28px'>
              <div class='items' style='width: 33%'>费用预算编码:{{model.budgetCode}}</div>
              <div class='items' style='width: 33%'>费用预算类型:{{model.budgetTypeStr}}</div>
              <div class='items' style='width: 33%'>年份:{{model.budgetYear}}</div>
              <div class='items' style='width: 33%'>季度:{{model.budgetQuarter}}</div>
              <div class='items' style='width: 33%'>月度:{{model.budgetMonth}}</div>
              <div class='items' style='width: 33%'>对象:{{model.budgetType==1?model.budgetOrgName:model.custName}}</div>
              <div class='items' style='width: 33%'>预算科目:{{model.budgetSubjectsName}}</div>
              <div class='items' style='width: 33%'>商品层级:{{model.productLevelName}}</div>
              <div class='items' style='width: 33%'>商品:{{model.productName}}</div>
              <div class='items' style='width: 33%'>期初金额:{{model.initAmount}}</div>
              <div class='items' style='width: 33%'>当前余额:{{model.amount}}</div>
              <div class='items' style='width: 33%'>备注:{{model.remarks}}</div>
            </div>
          </a-col>
          <a-col :span="24">
            <div style='padding: 8px 24px;margin-bottom:12px;font-size: 16px;font-weight: 500;border-bottom: 1px solid #e8e8e8;border-top: 1px solid #e8e8e8' >调整信息</div>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="变更类型"
              >
              <a-select v-decorator="['dataType',{rules: [{ required: true, message: '变更类型' }]}]"  placeholder="变更类型" :disabled="detailPage" @change='handleSelect'>
                <a-select-option  value="5">追加
                </a-select-option>
                <a-select-option  value="4">削减
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="变更金额"
              >
              <a-input-number :min="0" placeholder="变更金额" v-decorator="['changeAmount',{rules: [{ required: true, message: '变更金额' }]}]" :disabled="detailPage" style='width: 100%' @change='numberChange'/>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="变更后余额"
              >
              <a-input-number placeholder="变更后余额" v-model='afterAmount' :disabled="true" style='width: 100%'/>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="备注"
              >
              <a-input placeholder="请输入备注" v-decorator="['remarks']" :disabled="detailPage"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { getAction, httpAction, postAction } from '@/api/manage'
import { pick } from 'lodash'
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import JAreaLinkage from '@comp/cn-form/CnAreaLinkage'
import UploadImage from '@/components/upload-image/UploadImage'
import JImageUpload from '@/components/cn-form/JImageUpload'
import JSelectSubjects from '@/components/cn-select-popup/JSelectSubjects'

export default {
  name: 'costChange',
  data() {
    return {
      type:1,
      detailPage:false,
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      subOp:[],
      url:{
        detail: window._CONFIG['domianTpmURL'] + '/budget/tpmBudgetFee/getInfo',
      },
      addOrUpdateUrl: window._CONFIG['domianTpmURL'] + '/budget/tpmBudgetFee/expenseBudgetChange',
      afterAmount:0,
    }
  },
  components: { JTreeSelect, JAreaLinkage, UploadImage, JImageUpload,JSelectSubjects },
  created() {

  },
  methods: {
    add() {
      this.edit({})
    },
    edit(record, status) {
      this.form.resetFields()
      this.afterAmount=0
      getAction(this.url.detail,{id:record.id}).then(res=>{
        if(res.success){
          this.model = Object.assign({}, res.result)
          this.afterAmount= res.result.amount
          this.$nextTick(() => {
            // this.form.setFieldsValue(pick(this.model, Object.keys(this.model)))
          })
        }
      })
      this.visible = true

    },

    handleSelect(dataType){
      let changeAmount=this.form.getFieldValue('changeAmount')||0
      if(dataType==5){
        this.afterAmount=this.model.amount+changeAmount
      }
      if(dataType==4){
        this.afterAmount=this.model.amount-changeAmount
      }
    },

    numberChange(e){
      let dataType=this.form.getFieldValue('dataType')
      if(!dataType){
        this.$message.warning('请选择变更类型')
        return
      }
      if(dataType==5){
        this.afterAmount=this.model.amount+e
      }
      if(dataType==4){
        this.afterAmount=this.model.amount-e
      }
    },

    close(){
      this.visible = false
      this.$emit('close')
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      const that = this
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          let formData = Object.assign({}, values)
          formData.id=this.model.id
          formData.change='0'
          postAction(this.addOrUpdateUrl, formData).then(res => {
            if (!res.success) {
              that.$message.error(res.message)
              that.confirmLoading = false
              return
            }
            that.confirmLoading = false
            that.$emit('ok')
            that.handleCancel()
            that.$message.success(res.message)
          })
        }
      })
    },
    changeSelect(options,name,event){
      name=name.split("Code");
      if(name.length>1){
        name=name[0]+'Name'
        let item=options.find(item=>item.value==event)
        this.model[name]=item.name
      }
    },
    selectRole(row,name,key){
      console.log(row,name,key)
      let value=row.map(v=>v[key])
      console.log(value)
      name=name.split("Code");
      if(name.length>=1){
        name=name[0]+'Name'+(name[1]?name[1]:'')
        this.model[name]=value+''
      }
    },

  }
}
</script>

<style scoped>
.gonghuoxinxi {
  width: 100%;
  border-bottom: 1px dashed black;
  margin: 10px 0;
  padding: 15px 5px;
  display: flex;
  flex-direction: column;
}
/deep/ .ant-modal-body{
  padding: 0px;
}
.flex{
  display: flex;

}
.wrap{
  flex-wrap: wrap;
}
.items{
  display: flex;
  align-items: center;
  width: 50%;
  flex-shrink: 0;
  flex-wrap: nowrap;
  margin-bottom: 24px;
}
.items-text{
  width: 60px;
  margin-right: 10px;
  text-align: right;
}



</style>
